<template>
  <div class="enroll-wrap">
    <el-card class="container">
      <el-form ref="enrollForm" :model="info" :rules="rules" label-width="80px">
        <el-form-item label="" label-width="1px" prop="username">
          <el-input
            v-model="info.username"
            placeholder="请输入用户名"
            clearable
          >
            <template slot="prepend"
              ><i class="el-icon-user-solid"></i
            ></template>
          </el-input>
        </el-form-item>
        <el-form-item label="" label-width="1px" prop="email">
          <el-input v-model="info.email" placeholder="请输入邮箱地址" clearable>
            <template slot="prepend"><i class="el-icon-message"></i></template>
          </el-input>
        </el-form-item>
        <el-form-item label="" label-width="1px" prop="password">
          <el-input
            v-model="info.password"
            placeholder="请输入密码"
            clearable
            show-password
          >
            <template slot="prepend"
              ><i class="el-icon-message-solid"></i
            ></template>
          </el-input>
        </el-form-item>
        <el-form-item label="" label-width="1px" prop="confirm">
          <el-input
            v-model="info.confirm"
            placeholder="请再次输入密码"
            clearable
            show-password
          >
            <template slot="prepend"><i class="el-icon-bell"></i></template>
          </el-input>
        </el-form-item>
        <el-button type="success" @click="enroll">立即注册</el-button>
        <br />
        <br />
        <el-link type="success" @click="toLogin">已有账号?去登陆</el-link>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    // 检查用户名是否已经存在于数据库
    var checkName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户名'))
      } else {
        this.$api.getVerifyUser(value).then((data) => {
          console.log(data.data.result.length)
          if (data.data.result.length == 1) {
            callback(new Error('该用户名已被占用'))
          } else {
            callback()
          }
        })
      }
    }
    //检查邮箱是否已经存在于数据库
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else if (value.toString().length < 6 || value.toString().length > 18) {
        callback(new Error('密码长度为6-18位'))
      } else {
        callback()
      }
    }
    var validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.info.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      info: {
        username: '',
        email: '',
        password: '',
        confirm: '',
      },
      rules: {
        username: [{ required: true, validator: checkName, trigger: 'blur' }],
        email: [
          {
            required: true,
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: 'blur',
          },
        ],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' },
        ],
        confirm: [
          { required: true, validator: validatePass1, trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    enroll() {
      this.$refs['enrollForm'].validate((valid) => {
        if (valid) {
          this.$api.postEnrollUser(this.info).then((data) => {
            console.log(data)
            const { code, message } = data.data
            if (code == 0) {
              this.$message.success(message)
              this.$router.push('/login')
            }
          })
        }
      })
    },
    toLogin() {
      this.$router.push('/login')
    },
  },
}
</script>

<style scoped>
.enroll-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #27304f;
}
.container {
  width: 400px;
  height: 400px;
  background-color: #fff;
}
.container .el-input {
  height: 50px;
}
.container >>> .el-input__inner {
  height: 50px;
}
.container .el-button {
  width: 360px;
}
.el-link {
  float: right;
}
</style>
